<template>
    <div>
        <el-button @click="goBack" type="primary" style="margin-top: 10px; margin-left: 20px;">返回</el-button>
        <page-main>
            <h2>详情</h2>
            <el-row>
                <el-col :span="4">
                    <div class="labelTitle">申请标题</div>
                </el-col>
                <el-col :span="20">
                    <div class="labelContent">{{ info.title }}</div>
                </el-col>
                <el-col :span="4">
                    <div class="labelTitle">所属单位</div>
                </el-col>
                <el-col :span="20">
                    <div class="labelContent">{{ info.unit_name }}</div>
                </el-col>
                <el-col :span="4">
                    <div class="labelTitle">联系人</div>
                </el-col>
                <el-col :span="4">
                    <div class="labelContent">{{ info.contact_name }}</div>
                </el-col>
                <el-col :span="4">
                    <div class="labelTitle">联系电话</div>
                </el-col>
                <el-col :span="4">
                    <div class="labelContent">{{ info.contact_phone }}</div>
                </el-col>
                <el-col :span="4">
                    <div class="labelTitle">开始时间</div>
                </el-col>
                <el-col :span="4">
                    <div class="labelContent">{{ info.sta_time }}</div>
                </el-col>
                <el-col :span="4">
                    <div class="labelTitle">结束时间</div>
                </el-col>
                <el-col :span="4">
                    <div class="labelContent">{{ info.end_time }}</div>
                </el-col>
                <el-col :span="4">
                    <div class="labelTitle">地址</div>
                </el-col>
                <el-col :span="4">
                    <div class="labelContent">{{ info.address }}</div>
                </el-col>
                <el-col :span="4">
                    <div class="labelTitle">申请内容</div>
                </el-col>
                <el-col :span="4">
                    <div class="labelContent">{{ info.content }}</div>
                </el-col>
                <el-col :span="4">
                    <div class="labelTitle">状态</div>
                </el-col>
                <el-col :span="4">
                    <div class="labelContent">
                        <el-tag v-if="info.is_verify == 1">已审核</el-tag>
                        <el-tag v-else-if="info.is_verify == 2" type="warning">审核失败</el-tag>
                        <el-tag v-else type="danger">待审核</el-tag>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="labelTitle">审核用户</div>
                </el-col>
                <el-col :span="4">
                    <div class="labelContent">{{ info.area_verify_realname }}</div>
                </el-col>
                <el-col :span="4">
                    <div class="labelTitle">审核人电话</div>
                </el-col>
                <el-col :span="4">
                    <div class="labelContent">{{ info.area_verify_phone }}</div>
                </el-col>
                <el-col :span="4">
                    <div class="labelTitle">审核时间</div>
                </el-col>
                <el-col :span="4">
                    <div class="labelContent">{{ formatDate(info.area_verify_time * 1000) }}</div>
                </el-col>
                <el-col :span="4">
                    <div class="labelTitle">备注</div>
                </el-col>
                <el-col :span="20">
                    <div class="labelContent">{{ info.remark }}</div>
                </el-col>
                <el-col :span="4">
                    <div class="labelTitle">申请报告</div>
                </el-col>
                <el-col :span="20">
                    <div class="labelContent">
                        <el-image
                            style="width: 60px; height: 45px; margin-left: 10px;"
                            v-for="(item, index) in info.images"
                            :key="index"
                            :src="upDataUrl + item"
                            :preview-src-list="[upDataUrl + item]"
                        ></el-image>
                    </div>
                </el-col>
            </el-row>
            <div v-if="info.is_verify != 1" style="display: flex; justify-content: center; margin-top: 20px;">
                <el-button
                    size="mini"
                    type="primary"
                    @click="audit"
                    style="width: 80px;"
                >审核</el-button>
            </div>
        </page-main>
        <page-main>

            <h2>操作日志</h2>
            <el-table
                :data="logList"
                style="width: 100%;"
                :default-sort="{ prop: 'id', order: 'descending' }"
            >
            <el-table-column label="操作时间">
                    <template #default="scope">
                        <span>
                            {{ formatDate(scope.row.create_time * 1000) }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" prop="operate"> </el-table-column>
                <el-table-column
                    label="操作人员"
                    prop="realname"
                ></el-table-column>
                <el-table-column label="备注" prop="remark"> </el-table-column>

            </el-table>
        </page-main>
        <el-dialog
            width="40%"
            title="审核"
            destroy-on-close
            @close="closeDialog"
            v-model="dialogFormVisible"
            :close-on-click-modal="false"
        >
            <el-form :model="formData" :rules="rules" ref="form">
                <el-form-item label="状态" :label-width="formLabelWidth" prop="is_verify">
                    <el-select v-model="formData.is_verify" clearable  placeholder="请选择">
                        <el-option
                            v-for="item in option"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth" prop="area_verify_reason">
                    <el-input v-model="formData.area_verify_reason"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submit">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { ElMessage } from "element-plus";
export default {
    data() {
        return {
            option: [
                {label: '通过', value: 1},
                {label: '未通过', value: 2}
            ],
            logList: [],
            upDataUrl: import.meta.env.DEV
                ? '/proxy/'
                : import.meta.env.VITE_APP_API_BASEURL,
            info: {},
            dialogFormVisible: false,
            formData: {
                is_verify: '',
                area_verify_reason: '',
                id: 0
            },
            rules: {
                area_verify_reason: [{ required: true, message: "请输入", trigger: "blur" }],
                is_verify: [{ required: true, message: "请选择", trigger: "blur" }],
            },
        }
    },
    created() {
        this.getDataList()
        this.getDataInfo()
    },
    methods: {
        goBack(){
      this.$router.go(-1)
    },
        getDataList() {
            this.$api
                .post('/unit/FirePower/log', {
                    fire_id: this.$route.query.id,
                    rows: 1000,
                })
                .then((res) => {
                    this.logList = res.data.lists
                })
        },
        getDataInfo() {
            this.$api
                .post('/unit/FirePower/lists', { id: this.$route.query.id })
                .then((res) => {
                    this.info = res.data.lists[0]
                })
        },
        // 审核按钮
        audit() {
            this.dialogFormVisible = true
        },
        // 点击确定
        submit() {
            this.formData.id = this.info.id
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.$api.post('/unit/FirePower/verify', this.formData).then(res => {
                        if (res.code == 200) {
                            this.$message({
                                type: "success",
                                message: res.msg,
                            });
                        } else {
                            this.$message({
                                type: "error",
                                message: res.msg,
                            });
                        }
                        this.dialogFormVisible = false
                        this.getDataList()
                        this.getDataInfo()
                    })
                } else {
                    ElMessage.error("请填写完整");
                    return false;
                }
            })
        },
        closeDialog() {
            this.formData = {
                is_verify: '',
                area_verify_reason: ''
            }
        },
        // 时间转换
        formatDate(timeStamp, format) {
            if (!timeStamp) return ''
            timeStamp = +timeStamp
            var date = new Date(timeStamp)
            // 年月日
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            month = month < 10 ? '0' + month : month
            var day = date.getDate()
            day = day < 10 ? '0' + day : day
            // 时分秒
            var hour = date.getHours()
            hour = hour < 10 ? '0' + hour : hour
            var min = date.getMinutes()
            min = min < 10 ? '0' + min : min
            var sec = date.getSeconds()
            sec = sec < 10 ? '0' + sec : sec
            if (format) {
                format = format.replace('Y', year)
                format = format.replace('M', month)
                format = format.replace('D', day)
                format = format.replace('h', hour)
                format = format.replace('m', min)
                format = format.replace('s', sec)
                return format
            } else {
                return year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec
            }
        },
    },
}
</script>
<style>
.labelTitle {
    background-color: #fafafa;
    color: #909399;
    font-weight: bold;
    padding: 17px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ebeef5;
}
.labelContent {
    padding: 17px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ebeef5;
    height: 57px;
}
</style>
